<template>
  <div class="table-radius">
    <div class="title">{{title}}</div>
    <div class="table-block">
      <div class="table-head table-row">
        <div class="table-col" v-for="(item,index) in tableData.head" :key="index" :style="`width:${item.width}%`">{{item.name}}</div>
      </div>
      <div class="table-content table-row" v-for="(item,index) in tableData.data" :key="index" >
        <div class="table-col" v-for="(item1,index1) in item" :style="`width:${tableData.head[index1].width}%;`" :key="index1">{{item1}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TableRadius",
  props:{
    title:{
      type:String,
      default:''
    },
    tableData:{
      type:Object,
    }
  }
}
</script>

<style scoped lang="scss">
.table-radius{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 30px;
  .title{
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    height: 40px;
  }
  .table-block{
    width: 100%;
    height: calc(100% - 30px);
    .table-row{
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      background: #192938;
      height:35px;
      border-radius:20px;
      margin-top: 20px;
      .table-col{
        color: #dedede;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
      }
    }
    .table-head{
      border-bottom: 1px solid #dedede;
      background: none;
      border-radius: 0;
      margin-top: 0;
      .table-col{
        font-size: 13px;
        font-weight: bold;
        flex: none;
        overflow: hidden;
      }
    }
  }
}
</style>
